<template>
    <div class="content">
        <div class="filter-wrap">
            <div class="box-flex">
                <div class="flex">
                    <zx-form-group :title="$t('CURRENCY')">
                        <zx-select :place="$t('CURRENCY_PLACE')" v-model="coinNo" class="boxShadow">
                            <zx-option value="">{{'ALL'|t}}</zx-option>
                            <zx-option :value="item.coinType" v-for="(item,key) of balanList" :key='key'>{{item.coinCore}}</zx-option>
                        </zx-select>
                    </zx-form-group>
                </div>
                <div class="flex">
                    <zx-form-group :title="$t('TYPE')">
                        <zx-select :place="$t('TYPE_PALCE')" v-model="type" class="boxShadow">
                            <zx-option value="2">{{'ALL'|t}}</zx-option>
                            <zx-option value="0">{{'INTO'|t}}</zx-option>
                            <zx-option value="1">{{'OUT'|t}}</zx-option>
                        </zx-select>
                    </zx-form-group>
                </div>
            </div>
        </div>
        <ul class="record-list">
            <li class="record-item boxShadow" v-for="(item,key) of recordList" :key='key'>
                <div class="item-top box-flex space-between border-b">
                    <h3 class="top-title" :class="item.type==1?'':'c-red'">
                        <i class="icon" :class="item.type=='1'?'icon-recharge':'icon-withdraw'"></i>
                        {{item.types}}</h3>
                    <span>{{item.date}}</span>
                </div>
                <div class="item-desc">
                    <div class="box-flex space-between item-info ">
                        <span>{{'CURRENCY'|t}}：</span>
                        <span class="c-primary">{{item.coinCore}}</span>
                    </div>
                    <div class="box-flex space-between item-info ">
                        <span>{{'TYPE'|t}}：</span>
                        <span>{{item.types}}</span>
                    </div>
                    <div class="box-flex space-between item-info">
                        <span>{{'STATUS'|t}}：</span>
                        <span :class="item.state=='1'?'c-success':item.state=='2'?'c-fail':'c-red'">{{item.states}}</span>
                    </div>
                    <div class="box-flex space-between item-info">
                        <span>{{'SERVER_CHARGE'|t}}：</span>
                        <span>{{item.fee}}</span>
                    </div>
                    <div class="box-flex space-between item-info">
                        <span>{{'ACTUAL_OUTPUT'|t}}：</span>
                        <span>{{item.actualNum}}</span>
                    </div>
                    <div class="box-flex space-between item-info ">
                        <span>{{'TOTAL_OUTPUT'|t}}：</span>
                        <span>{{item.totalNum}}</span>
                    </div>
                    <div class="item-button">
                        <zx-button class="copy-btn" @click="$router.push({path:'/asset/record/detail',query:{id:item.id}})">{{'DETAIL'|t}}</zx-button>
                    </div>
                </div>
            </li>
        </ul>
        <zx-no-data v-model='showNoDataBool'></zx-no-data>
        <div v-infinite-scroll="GetTradeInfoByUser" infinite-scroll-disabled="loading" infinite-scroll-distance="10"></div>
    </div>
</template>
<script>
    import { Form, Func, Auth } from '@/providers';
    import { Asset } from '@/services';
    export default {
        data() {
            return {
                coinNo: '',
                type: '2',
                pageNumber: 1,
                pageSize: 10,
                balanList: [],
                showNoDataBool: false,
                loading: false,
                recordList: []
            };
        },
        methods: {
            changevalue(value) {
                // this.GetTradeInfoByUser();
            },
            async GetBalanByUserNo() {
                try {
                    let res = await Asset.GetBalanByUserNo({
                        userNo: Auth.getItem('userId'),
                        hide: '0',
                        token: Auth.getItem('token')
                    });
                    this.balanList = res.data;
                } catch (error) {
                    console.log(error);
                }
            },
            getData() {
                this.GetBalanByUserNo();
                this.GetTradeInfoByUser();
            },
            async GetTradeInfoByUser() {
                if (this.loading) { return false; };
                this.loading = true;
                try {
                    let res = await Asset.GetTradeInfoByUser({
                        type: this.type,
                        coinNo: this.coinNo,
                        pageNum: this.pageNumber,
                        pageSize: this.pageSize,
                        category: '', // 1、充值；2、提现；3、c2c；4、币币；5、货币兑换，传空值默认全部
                        userNo: Auth.getItem('userId')
                        // token: sessionStorage.getItem('token')
                    });
                    let typeserMap = new Map();
                    let stateMap = new Map();
                    typeserMap.set(1, 'RECHARGE').set(2, 'WITHDRAWLS').set(3, 'C2C').set(4, 'BB').set(5, 'BB_TRADE');
                    stateMap.set(0, 'TRANSFER').set(1, 'SUCCESS').set(2, 'AUDIT').set(3, 'FAILT');
                    for (let item of res.data.tradeInfos) {
                        item.types = typeserMap.get(item.category);
                        item.states = stateMap.get(item.state);
                    }
                    this.recordList = [...this.recordList, ...res.data.tradeInfos];
                    if (res.data.tradeInfos.length >= 10) {
                        this.loading = false;
                    }
                    this.pageNumber++;
                    // 判断size
                    this.showNoDataBool = res.data.count == 0 ? true : false;

                } catch (error) {
                    console.log(error);
                }
            }
        },
        watch: {
            'coinNo'(val) {
                this.recordList = [];
                this.pageNumber = 1;
                this.loading = false;
                this.GetTradeInfoByUser();
            },
            'type'(val) {
                this.recordList = [];
                this.pageNumber = 1;
                this.loading = false;
                this.GetTradeInfoByUser();
            }
        },
        created() {
            this.getData();
        }
    };
</script>
<style lang="scss" scoped>
    @import "../../assets/sass/asset.scss";
</style>